<template>
  <div>
    <Personinfo style="height: 50px;"></Personinfo>
    <Logox></Logox>
    <menux></menux>
    <el-main>
        <el-row>

          <div class="grid-content bg-purple-dark">
            <el-input v-model="searchInput"
                      style="margin: 20px 200px;width: 650px;" placeholder="请输入关键字">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
<!--          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="郫都区友爱镇片区" name="first"></el-tab-pane>
            <el-tab-pane label="郫都区郫筒镇片区" name="second"></el-tab-pane>
            <el-tab-pane label="郫都区德源镇片区" name="third"></el-tab-pane>
            <el-tab-pane label="郫都区三道堰镇片区" name="fourth"></el-tab-pane>
          </el-tabs>-->

          <el-radio-group v-model="tabPosition" style="margin:10px 0px;width: 100%">
            <el-radio-button label="top" style="width: 25%">郫都区友爱镇片区</el-radio-button>
            <el-radio-button label="right" style="width: 25%"> 郫都区郫筒镇片区</el-radio-button>
            <el-radio-button label="bottom" style="width: 25%">郫都区德源镇片区</el-radio-button>
            <el-radio-button label="left" style="width: 25%">郫都区三道堰镇片区</el-radio-button>
          </el-radio-group>
          <el-card class="box-card">

          <el-row :gutter="20" >
              <el-col :span="1" style="width: 100px"><Strong>职位分类：</Strong></el-col>
              <el-col :span="19">
                <div>
                    <el-link :underline="false"
                             :class="jobType.clazz" v-for="(jobType,index) in jobTypes" @click="selectItem(jobTypes,index)">{{jobType.label}}</el-link>
                </div>
              </el-col>
          </el-row>

            <el-row :gutter="20" style="margin-left: 75px;margin-top: 20px;" v-if="jobTypeChildren&&jobTypeChildren.length>0">
              <el-col :span="19">
                <div>
                  <el-link :underline="false"
                           :class="jobType.clazz" v-for="(jobType,index) in jobTypeChildren" @click="selectItem(jobTypeChildren,index)">{{jobType.label}}</el-link>
                </div>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 15px;">
              <el-col :span="1" style="width: 100px"> <Strong>薪资范围：</Strong></el-col>
              <el-col :span="19">
                <div>
                  <el-link :underline="false"
                           :class="salary.clazz" v-for="(salary,index) in salaryScope" @click="selectItem(salaryScope,index)">{{salary.label}}</el-link>
                </div>
              </el-col>
            </el-row>


            <el-row :gutter="20" style="margin-top: 15px;">
              <el-col :span="1" style="width: 100px"><Strong>更多：</Strong></el-col>
              <el-col :span="19">
                <el-select v-model="company" placeholder="公司行业" style="width: 180px;">
                  <el-option
                      v-for="item in companyTypes"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label">
                  </el-option>
                </el-select>
                <el-select v-model="education" placeholder="学历要求" style="width: 180px;">
                  <el-option
                      v-for="item in eduTypes"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="workYear" placeholder="工作经验" style="width: 180px;">
                  <el-option
                      v-for="item in workTime"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="comeHear" placeholder="到岗时间" style="width: 180px;">
                  <el-option
                      v-for="item in comingTime"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-card>


          <el-tabs type="border-card" style="margin-top: 10px;">
            <el-tab-pane>
              <span slot="label"><i class="el-icon-date"></i>我的行程</span>
              排序方式：<i class="fa fa-sort mySort" aria-hidden="true">更新时间</i>&nbsp;&nbsp;<i class="fa fa-sort mySort" aria-hidden="true">发布时间</i>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"><i class="el-icon-table-lamp"></i>所有职位</span>
              排序方式：<i class="fa fa-sort mySort" aria-hidden="true">更新时间</i>&nbsp;&nbsp;<i class="fa fa-sort mySort" aria-hidden="true">发布时间</i>
            </el-tab-pane>
            <el-tab-pane >
              <span slot="label"><i class="el-icon-discount"></i>紧急职位</span>
              排序方式：<i class="fa fa-sort mySort" aria-hidden="true">更新时间</i>&nbsp;&nbsp;<i class="fa fa-sort mySort" aria-hidden="true">发布时间</i>
            </el-tab-pane>
            <el-tab-pane >
              <span slot="label"><i class="el-icon-news"></i>推荐职位</span>
              排序方式：<i class="fa fa-sort mySort" aria-hidden="true">更新时间</i>&nbsp;&nbsp;<i class="fa fa-sort mySort" aria-hidden="true">发布时间</i>
            </el-tab-pane>
          </el-tabs>

          <el-card class="box-card" style="margin: 10px 0px" v-for="job in jobs">
            <el-row>
              <el-col style="width: 448px">
                <div class="grid-content bg-purple">
                    <el-row><el-link @click="showDetail(job.id)">{{job.jobname}}</el-link></el-row>
                    <el-row style="padding-top: 5px"><span style="color: red">￥不限</span> 成都</el-row>
                    <el-row style="padding-top: 5px">五险一金</el-row>
                </div>
              </el-col>
              <el-col style="width: 500px">
                  <div class="grid-content bg-purple">
                    <el-row><span style="color: #1b64b1">{{job.company}}</span></el-row>
                    <el-row style="padding-top: 5px">行业：服务业</el-row>
                    <el-row style="padding-top: 5px">性质：国企</el-row>
                  </div>
              </el-col>
              <el-col style="width: 168px">
<!--                <div class="grid-content bg-purple">-->
                  <el-button style="height: 30px;
                                    padding: 3px 10px;
                                    width: 100px;
                                    background-color: #f0ffff">投递</el-button><br/>
                  <el-row style="padding-top: 20px">
                    <li class="fa fa-refresh">2021-09-13</li>&nbsp;&nbsp;&nbsp;<a class="fa fa-star-o mySort">收藏</a>
                  </el-row>
<!--                </div>-->
              </el-col>
            </el-row>
          </el-card>

        <el-row>
              <el-pagination style="margin-left: 200px"
                  :current-page="1"
                  :page-sizes="[10, 20, 30, 50]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
              </el-pagination>
        </el-row>

          <div>
            <el-divider content-position="left">推荐职位</el-divider>
            <el-row>
                  <job v-for="index in 12" style="width: 372px"></job>
            </el-row>
          </div>
          <div>
            <el-divider content-position="left">推荐公司</el-divider>
            <el-row :gutter="20">
              <el-col style="width: 100%;">
                <div v-for="logo in comLogos" style="float: right;text-align:center">
                  <el-row>
                    <el-image
                        style="width: 225px; height: 100px;margin: 2px 2px;border: 1px solid #999;"
                        :src="logo"
                        fit="fill" ></el-image>
                  </el-row>
                  <el-row>
                    <span style="text-align:center">成都扬名食品有限公司</span>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-row>
    </el-main>
    <el-footer>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8" :offset="8">
          <footerx></footerx>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
import menux from '../menux';
import Logox from '../Logox';
import footerx from '../footerx';
import Personinfo from "../Personinfo";
import Login from "../Login";
import Job from "../common/Job";
export default {
  components: {Job, menux,Logox,footerx,Personinfo,Login},
  name: "zhaoping",
  data (){
    return {
      searchInput:'',
      tabPosition: 'left',
      activeName:'first',
      defaultJobTypes:'',
      jobTypeChildren:[

      ],
      jobTypes:[
        {label:'计算机',clazz:'unSelected',
          children:[
            {label:'计算机软件',clazz:'unSelected'},
            {label:'计算机硬件',clazz:'unSelected'},
            {label:'软件销售',clazz:'unSelected'},
            {label:'软件开发',clazz:'unSelected'},
            {label:'软件测试',clazz:'unSelected'}
          ]},
        {label:'会计',clazz:'unSelected',
          children:[
            {label:'出纳',clazz:'unSelected'},
            {label:'会计',clazz:'unSelected'},
            {label:'会计总监',clazz:'unSelected'},
            {label:'实习生会计',clazz:'unSelected'}
          ]},
        {label:'教师',clazz:'unSelected',
          children:[
            {label:'主任',clazz:'unSelected'},
            {label:'科任老师',clazz:'unSelected'},
            {label:'体育老师',clazz:'unSelected'},
            {label:'校长',clazz:'unSelected'},
            {label:'班主任',clazz:'unSelected'}
          ]},
        {label:'服务员',clazz:'unSelected',
          children:[
            {label:'大堂经理',clazz:'unSelected'},
            {label:'服务员',clazz:'unSelected'},
            {label:'传菜员',clazz:'unSelected'},
            {label:'前台',clazz:'unSelected'},
            {label:'收银',clazz:'unSelected'}
          ]},
        {label:'经理',clazz:'unSelected',
          children:[
            {label:'客户经理',clazz:'unSelected'},
            {label:'总经理',clazz:'unSelected'},
            {label:'销售经理',clazz:'unSelected'},
            {label:'部门经理',clazz:'unSelected'},
            {label:'开发经理',clazz:'unSelected'}
          ]},
        {label:'医药',clazz:'unSelected',
          children:[
            {label:'中医药',clazz:'unSelected'},
            {label:'计算机硬件',clazz:'unSelected'},
            {label:'软件销售',clazz:'unSelected'},
            {label:'软件开发',clazz:'unSelected'},
            {label:'软件测试',clazz:'unSelected'}
          ]},
        {label:'建筑师',clazz:'unSelected',
          children:[
            {label:'计算机软件',clazz:'unSelected'},
            {label:'计算机硬件',clazz:'unSelected'},
            {label:'软件销售',clazz:'unSelected'},
            {label:'软件开发',clazz:'unSelected'},
            {label:'软件测试',clazz:'unSelected'}
          ]},
        {label:'工程师',clazz:'unSelected',
          children:[
            {label:'计算机软件',clazz:'unSelected'},
            {label:'计算机硬件',clazz:'unSelected'},
            {label:'软件销售',clazz:'unSelected'},
            {label:'软件开发',clazz:'unSelected'},
            {label:'软件测试',clazz:'unSelected'}
          ]},
        {label:'实习生',clazz:'unSelected'},
        {label:'人事/行政',clazz:'unSelected'},
        {label:'不限',clazz:'unSelected'}
      ],
      defaultSalary:'',
      salaryScope:[
        {label:'1000-3000',clazz:'unSelected'},
        {label:'3000-8000',clazz:'unSelected'},
        {label:'8000-10000',clazz:'unSelected'},
        {label:'10000-30000',clazz:'unSelected'},
        {label:'30000-50000',clazz:'unSelected'},
        {label:'50000以上',clazz:'unSelected'},
        {label:'不限',clazz:'unSelected'}
      ],
      jobs:[
        { company: '美的集团有限责任公司', jobname: '和盛镇人民政府便民服务大厅程序员',id:1 },
        { company: '腾讯集团有限责任公司', jobname: '和盛镇人民政府便民服务大厅程序员' ,id:2},
        { company: '京东集团有限责任公司', jobname: '和盛镇人民政府便民服务大厅程序员',id:3 },
        { company: '百度集团有限责任公司', jobname: '和盛镇人民政府便民服务大厅程序员' ,id:4},
        { company: '百度集团有限责任公司', jobname: '和盛镇人民政府便民服务大厅程序员' ,id:5},
        { company: '百度集团有限责任公司', jobname: '和盛镇人民政府便民服务大厅程序员' ,id:6},
        { company: '阿里集团有限责任公司', jobname: '和盛镇人民政府便民服务大厅测试',id:7 }
      ],
      jobItems: [
        { type: '', label: '标签一' },
        { type: '', label: '标签二' },
        { type: '', label: '标签三' },
        { type: '', label: '标签四' },
        { type: '', label: '标签五' }
      ],
      salaryItems: [
        { type: '', label: '1000'},
        { type: '', label: '2000' },
        { type: '', label: '3000' },
        { type: '', label: '4000' },
        { type: '', label: '5000' }
      ],
      companyTypes:[
        {value:'1',label:'不限'},
        {value:'2',label:'外资企业'},
        {value:'3',label:'合资企业'},
        {value:'4',label:'私营企业'},
        {value:'5',label:'民营企业'},
        {value:'6',label:'股份制企业'},
        {value:'7',label:'集体企业'},
        {value:'8',label:'上市公司'}
      ],
      eduTypes:[
        {value:'1',label:'不限'},
        {value:'2',label:'高中'},
        {value:'3',label:'中专'},
        {value:'4',label:'大专'},
        {value:'5',label:'本科'},
        {value:'6',label:'硕士'},
        {value:'7',label:'博士'}
      ],
      workTime:[
        {value:'1',label:'不限'},
        {value:'2',label:'应届毕业生'},
        {value:'3',label:'1年以上'},
        {value:'4',label:'2年以上'},
        {value:'5',label:'3年以上'},
        {value:'6',label:'5年以上'},
        {value:'7',label:'8年以上'},
        {value:'8',label:'10年以上'}
      ],
      comingTime:[
        {value:'1',label:'不限'},
        {value:'2',label:'1周以内'},
        {value:'3',label:'2周以内'},
        {value:'4',label:'3周以内'},
        {value:'5',label:'1月以内'}
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }, {
        value: '选项6',
        label: '不限'
      }],
      selectValue:'',
      comeHear:'',
      workYear:'',
      education:'',
      company:'',
      comLogos:['./static/com/1.png',
        './static/com/2.png',
        './static/com/3.png',
        './static/com/4.png',
        './static/com/2.png',
        './static/com/5.png',
        './static/com/6.png',
        './static/com/7.png',
        './static/com/8.png',
        './static/com/9.png',
        './static/com/10.png',
        './static/com/8.png',
        './static/com/11.png',
        './static/com/1.png',
        './static/com/12.png'
      ]
    }
  },
  methods:{
    handleClick(){

    },
    selectJob(e){
      if(e == '不限'){
          this.defaultJobTypes = '' ;
      }
    },
    selectSalaryScope(e){
      if(e == '不限'){
        this.defaultSalary = '' ;
      }
    },
    selectItem(objects,index){
      objects.forEach(e=>{
        e.clazz = 'unSelected';
      });
      if(objects[index].label != '不限'){
        objects[index].clazz = (objects[index].clazz == 'selected')?'unSelected':'selected';
      }
      if(objects == this.jobTypes){
        if(objects[index].label != '不限'){
          if(objects[index].children){
            this.jobTypeChildren.splice(0)
            objects[index].children.forEach(e=>{
              this.jobTypeChildren.push(e)
            })
          }else{
            this.jobTypeChildren.splice(0)
          }
        }else{
          this.jobTypeChildren.splice(0)
        }
      }
    },
    showDetail(){
        this.$router.push("ZhaoPingDetail")
    }
  }
}
</script>

<style scoped>

.el-main{
  margin:0 auto;
  background: azure;
  width: 1200px;
}
.selected{
  background-color: #409eff;
  color: white;
  border: 1px solid #999;
  font-size: 16px;
  padding: 5px 11px;
  font-family: '微软雅黑'!important;
}
.selected:hover{
  color: white;
}
.unSelected{
  font-size: 16px;
  padding: 5px 11px;
  font-family: '微软雅黑'!important;
}
/deep/ .el-radio-button__inner{
  width: 100%;
}
/deep/ .mySort:hover{
  cursor:pointer;
}
 .is-active{
    background-color: #66b1ff;
  }
</style>